<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
      if(statusTxt=="success")
        alert(responseTxt);
      if(statusTxt=="error")
        alert("Error: "+xhr.status+": "+xhr.statusText);
    });
  });
});
</script>
</head>
<body>
<h4>
$(selector).load(URL,data,callback);
</h4>
<h4>The optional callback parameter specifies a callback function to run when the load() method is completed. The callback function can have different parameters:
</h4>
<ul>
<li>responseTxt - contains the resulting content if the call succeed</li>
<li>statusTxt - contains the status of the call</li>
<li>xhr - contains the XMLHttpRequest object</li>
</ul>
<p>The following example displays an alert box after the load() method completes. If the load() method has succeed, it displays "External content loaded successfully!", and if it fails it displays an error message:</p>
<div id="div1"><h2>Let jQuery AJAX Change This Text</h2></div>
<button>Get External Content</button>

</body>
</html>